(function () {
    var socket = io.connect("http://localhost:3000");
    var map;

    /**
     * 메세지를 추가함
     * @param {Object} data
     * @param {String} [name] 닉네임, 빈 값이면 내가 보낸 것
     */
    var insertMessage = function (data, name) {
        var isMine = typeof name === "undefined";
        var list = $("#chat .chat-list");
        var tpl = $(isMine ? "#tpl_message_mine" : "#tpl_message");
        var output = tpl.html();

        // 메세지 유형에 따라 분기
        switch (data.type) {
            case "text":
                output = output.replace("{message}", data.msg);
                break;

            case "image":
                output = output.replace("{message}", '<a class="image-link" href="#" data-role="none"><img src="' + data.msg + '" width="200"></a>');
                break;

            case "location":
                output = output.replace("{message}", '<img src="http://maps.googleapis.com/maps/api/staticmap?center=' + data.msg + '&zoom=11&size=200x200&sensor=true">');
                break;
        }

        if (!isMine) {
            output = output.replace("{name}", name);
        }

        list.html(list.html() + output);

        // 메세지를 받은 후 스크롤을 제일 아래로 내림
        list.scrollTop(list.get(0).scrollHeight);
    };

    /**
     * File API와 File Reader API를 이용해 이미지의 Data URI를 얻음
     * @param {Object} file
     * @param {Function} callback
     * @param {String} callback.data Data URI 형식의 스트링을 인자로 넘김
     */
    var getUploadedFile = function (file, callback) {
        if (file.type.indexOf("image/") !== false) {
            var reader = new FileReader();
            reader.onload = function (e) {
                callback(e.target.result);
            };
                    
            reader.readAsDataURL(file);
        } else {
            callback(false);
        }
    };

    // 메세지를 받았을 때
    socket.on("receive", function (data, name) {
        insertMessage(data, name);
    });

    $(document)
        // 로그인
        .on("pagebeforeshow", "#chat", function () {
            socket.emit("login", localStorage.name);
        })

        // 사진 보내기 클릭할 때
        .on("vclick", "#chat ._btn_photo", function () {
            $("#file").click();
        })

        // 사진 선택할 경우
        .on("change", "#file", function (e) {
            var files = e.target.files;
            
            for (var i = 0, l = files.length; i < l; i++) {
                getUploadedFile(files[i], function (image) {
                    if (image) {
                        var data = {
                            type: "image",
                            msg: image
                        };
                        socket.emit("send", data);
                        insertMessage(data);
                    }
                });
            }

            $("#attachment-menu").panel("close");
            e.target.value = '';
        })

        // 지도 초기화
        .one("pageshow", "#map-view", function () {
            map = new google.maps.Map($(".map-canvas").get(0), {
                mapTypeId: 'roadmap',
                zoom: 5,
                center: new google.maps.LatLng(37.314407, 127.120056)
            });
        })

        // 좌표 보내기
        .on("vclick", "#map-view ._btn_send", function () {
            var location = map.getCenter().toUrlValue();
            var data = {
                type: "location",
                msg: location
            };

            socket.emit("send", data);
            insertMessage(data);
            history.back();
        })

        // 대화 보내기
        .on("vclick", "#chat ._btn_send", function () {
            var message = $("#message").val();

            if (message) {
                var data = {
                    type: "text",
                    msg: message
                };
                socket.emit("send", data);

                // 자신의 메세지는 직접
                insertMessage(data);
                $("#message").val("");
            }
        });
})();